<template>
  <div>
    <v-card>
      <v-card-title>
        <v-btn class="primary" @click="addBrand">新增品牌</v-btn>
        <v-spacer/>
        <v-text-field label="请输入关键字搜索" v-model="key" append-icon="search" hide-details></v-text-field>
      </v-card-title>
      <v-divider/>
      <v-data-table
        :headers="headers"
        :items="brands"
        :pagination.sync="pagination"
        :total-items="totalBrands"
        :loading="loading"
        class="elevation-1"
      >
        <!-- slot相当于v-for，props，item相当于循环时的每个对象     -->
        <template slot="items" slot-scope="props">
          <td>{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>
          <td class="text-xs-center">
            <img v-if="props.item.image" :src="props.item.image" width="130" height="40">
            <span v-else>无</span>
          </td>
          <td class="text-xs-center">{{ props.item.letter }}</td>
          <td class="text-xs-center">
            <v-btn class="warning" @click="editBrand(props.item)">编辑</v-btn>
            <v-btn class="info">删除</v-btn>

          </td>
        </template>
      </v-data-table>
    </v-card>

    <v-dialog
      v-model="show"
      width="500"
      persistent
    >
      <v-card>

        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{edit?"修改":"新增"}}品牌</v-toolbar-title>
          <v-spacer/>
          <!--关闭窗口的按钮-->
          <v-btn icon @click="closeWindow">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5">
          <!--          //引用子组件-->
          <my-brand-form @close="closeWindow" :old-brand="oldBrand" :edit="edit"></my-brand-form>
        </v-card-text>


      </v-card>

    </v-dialog>

  </div>
</template>

<script>
  import myBrandForm from "./MyBrandForm"

  export default {
    name: "MyBrand",
    components: {//组件的注册
      myBrandForm
    },
    data() {
      return {
        oldBrand: {},
        edit: false,
        show: false,
        key: "",
        pagination: {},
        loading: true,
        totalBrands: 168,
        headers: [ // 头信息
          {text: 'id', align: 'center', value: 'id'},
          {text: '名称', align: 'center', sortable: false, value: 'name'},
          {text: 'LOGO', align: 'center', sortable: false, value: 'image'},
          {text: '首字母', align: 'center', value: 'letter', sortable: true,},
          {text: '操作', align: 'center', sortable: false,}
        ],
        brands: []
      }
    },
    created() {
      this.getDataFromServer()
    },
    methods: {

      editBrand(oldBrand) {
        //根据品牌的id查询对应的分类的对象，然后把值包到oldBrand中
        this.$http.get("item/category//bid/" + oldBrand.id).then(
          resp => {
            //把查询结果赋值给oldBrand的categories，把本该存在的分类信息取回来
            oldBrand.categories = resp.data;
            //把传入的oldBrand数据保存
            this.oldBrand = oldBrand;
            //先打开窗口
            this.show = true;
            this.edit = true;
          }
        ).catch(resp =>
          console.log("品牌对应的对象没有找到")
        )


      },
      addBrand() {
        this.show = true;
        this.edit = false;
        this.oldBrand=null
      },
      closeWindow() {
        this.show = false;
        //窗口关闭时，同时刷新页面内的数据
        this.getDataFromServer();
      },
      getDataFromServer() {//内部换成ajax请求后台分页查询
        this.$http.get("/item/brand/page", {
          params: {
            page: this.pagination.page,
            rows: this.pagination.rowsPerPage,
            sortBy: this.pagination.sortBy,
            desc: this.pagination.descending,
            key: this.key
          }
        }).then(resp => {
          //把后台查询的品牌数据赋值给brands
          this.brands = resp.data.items;
          //把总的条目数赋值给totalBrands
          this.totalBrands = resp.data.total;
          this.loading = false;
        }).catch(resp => {
          console.log("请求失败");
          console.log(resp);
        })
      }
    },
    watch: {
      pagination: {
        deep: true,
        handler() {
          this.getDataFromServer()
        }
      },
      key() {
        this.getDataFromServer()

      }
    }
  }
</script>

<style scoped>

</style>
